<meta charset='utf8' />
<body>
<canvas id='canvas' width='256px' height='256px'></canvas>
<div id='info'></div>
</body>
<script type="text/javascript">
	var ctx = canvas.getContext('2d');
	var Sequare = function(){
		this.ctx = null;
		this.data = null;
		this.color = null;
		this.tempDate = null;
		this.sort1 = null;
		this.sort2 = null;
		this.soer3 = null;
		this.step = 0;
		this.angleX = 0;
		this.angleZ = 0;
	};
	Sequare.prototype.initalize = function(canvas){
		this.ctx = canvas.getContext('2d');
		this.w = canvas.width;
		this.h = canvas.height;
		this.cx = this.w / 2;
		this.cy = this.h / 2;
	};
	Sequare.prototype.rotate = function(){
		// this.angleX=e.clientX/99;
		// this.angleZ=e.clientY/99;
		this.tempDate = [];
		for(var i = 0; i < this.data.length; i += 3){
			tx=this.data[i]*Math.cos(this.angleX)-this.data[i + 1]*Math.sin(this.angleX);
			ty=this.data[i]*Math.sin(this.angleX)+this.data[i + 1]*Math.cos(this.angleX);

			tz=this.data[i + 2]*Math.cos(this.angleZ)-ty*Math.sin(this.angleZ);
			ty=this.data[i + 2]*Math.sin(this.angleZ)+ty*Math.cos(this.angleZ);
			this.tempDate.push(Math.round(tx));
			this.tempDate.push(Math.round(ty));
			this.tempDate.push(Math.round(tz));
		}
		this.sort();
	};
	Sequare.prototype.sort = function(){
		var len = this.tempDate.length;
		var td = this.tempDate;
		this.sort1 = [];
		for(var i = 0; i < len; i += 12){
			this.sort1.push(td[i + 2]+td[i + 5]+td[i + 8]+td[i + 11]);
		}
		this.sort2 = this.sort1.slice(0);
		this.sort3 = [];
		this.sort2.sort(function(m, n){
			return m - n;
		});
		// for(var i = 0; i< this.sort2.length; i++){
		// 	var z = this.sort2[i];
		// 	for(var j = 0; j< this.sort1.length; j++){
		// 		if(z == this.sort1[j]){
		// 			this.sort3[k++] = j;
		// 			this.sort1[j] = null;
		// 			break;
		// 		}
		// 	}
		// }

		for(var i = 0; i< this.sort1.length; i++){
			var z = this.sort1[i];
			for(var j = 0; j< this.sort2.length; j++){
				if(z == this.sort2[j]){
					this.sort3[j] = i;
					this.sort2[j] = null;
					break;
				}
			}
		}
		this.drawElements();
	};
	Sequare.prototype.drawElements = function(){
		this.ctx.clearRect(0, 0, this.w, this.h);
		var i;
		for(var j = 0; j< this.sort3.length; j++){
			i = this.sort3[j];
			this.ctx.fillStyle = this.colors && this.colors[i]
			i *= 12;
			this.ctx.beginPath();
			this.ctx.moveTo(this.tempDate[i] + this.cx, this.tempDate[i + 1] + this.cy);
			this.ctx.lineTo(this.tempDate[i + 3] + this.cx, this.tempDate[i + 4] + this.cy);
			this.ctx.lineTo(this.tempDate[i + 6] + this.cx, this.tempDate[i + 7] + this.cy);
			this.ctx.lineTo(this.tempDate[i + 9] + this.cx, this.tempDate[i + 10] + this.cy);
			this.ctx.closePath();
			this.ctx.fill();
		}
	}
	var sequare = new Sequare();
	sequare.initalize(canvas);
	sequare.data = [64,0,32, 0,64,32, -64,0,32, 0,-64,32,
	64,0,-32, 0,64,-32, -64,0,-32, 0,-64,-32,
	64,0,32, 0,64,32, 0,64,-32, 64,0,-32,
	-64,0,32, 0,-64,32, 0,-64,-32, -64,0,-32,
	64,0,32, 0,-64,32, 0,-64,-32, 64,0,-32,
	-64,0,32, 0,64,32, 0,64,-32, -64,0,-32];
	sequare.data = [-64,-64,64, 64,-64,64, 64,64,64, -64,64,64,
	-64,-64,-64, 64,-64,-64, 64,64,-64, -64,64,-64,
	-64,-64,64, -64,64,64, -64,64,-64, -64,-64,-64,
	64,-64,64, 64,64,64, 64,64,-64, 64,-64,-64,
	-64,64,64, 64,64,64, 64,64,-64, -64,64,-64,
	-64,-64,64, 64,-64,64, 64,-64,-64, -64,-64,-64];
	sequare.colors = ['rgb(0,0,0)', 'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)','rgb(0,255,255)','rgb(255,0,255)'];
	sequare.rotate();

	document.onkeydown = function(e){
		switch(e.keyCode){
			case 37:sequare.angleX-= 0.04;break;
			case 38:sequare.angleZ-= 0.04;break;
			case 39:sequare.angleX+= 0.04;break;
			case 40:sequare.angleZ+= 0.04;break;
		}
		sequare.rotate();
	}
</script>